<!--  -->
<template>
  <div class='areaSelect-page'>
    <c-title text="选择区域"></c-title>
    <div class="area-details">
      <img :src="applyBackground" class="details-img"  v-if="applyBackground"/>
      <img src="../../../assets/images/regionalmanagement.png" class="details-img"  v-else/>
      <h3>升级条件</h3>
      <p class="desc">（{{info.up_type?'需要满足以下所有条件才可以申请区域代理':'需要满足以下任意一个条件才可以申请区域代理'}}）</p>
      <template v-if="info.team_dividend_status">
        <div class="explain explain-8">
          <span class="iconfont icon-shou"></span>
          <span class="title">直推<span>{{pushNum}}</span>个{{levelName}}，并且团队累计消费达到<span>{{price || '0.00'}}</span>元</span>
        </div>
        <div class="information-main">
          <div class="information">
            <span></span>
            <p>*您已直推{{havePushNum}}个{{levelName}}，并且团队累计消费已达到{{selfPrice}}元</p>
          </div>
        </div>
      </template>

      <template v-if="info.first_child_goods_contribution_status">
        <div class="explain explain-8">
          <span class="iconfont icon-shou"></span>
          <span class="title">会员直推下级购买商品的{{info.goods_contribution_plugin_name}}累计满<span>{{info.first_child_goods_contribution}}</span>元</span>
        </div>
        <div class="information-main">
          <div class="information">
            <span></span>
            <p>*您的直推下级购买商品的{{info.goods_contribution_plugin_name}}累计已达到{{info.actual_first_child_goods_contribution}}元</p>
          </div>
        </div>
      </template>

      <template v-if="info.group_child_goods_contribution_status">
        <div class="explain explain-8">
          <span class="iconfont icon-shou"></span>
          <span class="title">会员团队下级购买商品的{{info.goods_contribution_plugin_name}}累计满<span>{{info.group_child_goods_contribution}}</span>元</span>
        </div>
        <div class="information-main">
          <div class="information">
            <span></span>
            <p>*您的团队下级购买商品的{{info.goods_contribution_plugin_name}}累计已达到{{info.actual_group_child_goods_contribution}}元</p>
          </div>
        </div>
      </template>

      <div class="explain  pm-15" v-if="info.goods_buy_status">
        <span class="iconfont icon-shou"></span>
        <span class="title">购买<span>指定商品</span>之一</span>
      </div>
    </div>
    <div class="goods-list  flex-j-sb" v-if="info.goods_buy_status && goodsList.length > 0">
      <block v-for="(item,index) in goodsList" :key="index" class="goods-item">
        <div @click="goodsNav(item.id)">
          <img :src="item.thumb" />
          <div class="goods-footer">
            <h3 class="ell">{{item.title}}</h3>
            <p class="desc ell" v-if="item.description">{{item.description}}</p>
            <p class="price">￥{{item.price}}</p>
          </div>
        </div>
      </block>
    </div>
    <van-empty description="暂无数据" v-if="!info.goods_buy_status && goodsList.length == 0" />
    <div class="mh-50"></div>
  </div>
</template>

<script>
import areaSelect_controller from './areaSelect_controller';
export default areaSelect_controller;
</script>
<style lang="scss" scoped>
.ell {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.mh-50 {
  height: 3.125rem;
  clear: both;
}

/* @import url(); 引入公共css类 */
.areaSelect-page {
  .area-details {
    background-color: #fff;

    .details-img {
      width: 100%;
      height: auto;
      display: block;
    }

    h3 {
      font-weight: 500;
      font-size: 1rem;
      line-height: 1rem;
      color: #00001c;
      padding: 1.25rem 0 0.5rem 0;
    }

    .desc {
      font-size: 0.75rem;
      color: #aaaab3;
    }

    .explain {
      width: 100%;
      padding: 1.375rem 0.625rem 0 0.625rem;
      box-sizing: border-box;
      display: inline-block;
      text-align: left;

      .title {
        font-size: 0.875rem;
        color: #3b3b4a;
        line-height: 1.5rem;
        color: #3b3b4a;
        text-align: left;
        // display: inline;
        span {
          color: #f15353;
        }
      }

      .icon-shou {
        padding-right: 0.5rem;
      }
    }

    .explain-8 {
      padding-bottom: 0.5rem;
    }

    .pm-15 {
      padding: 0.875rem 0.625rem 0.9375rem 0.625rem;
    }

    .information-main {
      padding: 0  0.3125rem  0 2.125rem;
      text-align: left;

      .information {
        font-size: 0.6875rem;
        color: #f15353;
        padding: 0.5rem 0.375rem;
        display: inline-block;
        background-color: rgba($color: #f15353, $alpha: 0.1);
        border-radius: 1.6875rem;
        position: relative;

        span {
          position: absolute;
          top: -0.875rem;
          left: -0.0625rem;
          width: 0;
          height: 0;
          border-bottom: 0.625rem solid rgba($color: #f15353, $alpha: 0.1);
          border-left: 0.3125rem solid transparent;
          border-right: 0.3125rem solid transparent;
          border-top: 0.5rem solid transparent;
          transform: rotate(-24deg);
          margin: auto;
        }
      }
    }
  }

  .goods-list {
    margin: 0.625rem 0.625rem 0 0.625rem;
    flex-wrap: wrap;

    .goods-item {
      border-radius: 0.5rem;
      width: calc(50% - 0.1875rem);
      background-color: #fff;
      margin: 0 0 0.625rem 0;

      img {
        width: 100%;
        height: auto;
        display: block;
        border-radius: 0.5rem 0.5rem 0 0;
      }

      .goods-footer {
        padding: 0.1875rem 0.625rem 0 0.5rem;

        h3 {
          font-size: 0.875rem;
          color: #333;
          text-align: left;
        }

        .desc {
          font-size: 0.75rem;
          color: #aaaab3;
          text-align: left;
          padding: 7px 0 0 0;
        }

        .price {
          font-size: 0.875rem;
          color: #e64a40;
          text-align: left;
          padding: 0.625rem  0 0.625rem 0;
        }
      }
    }
  }
}
</style>